<template>
    <div id="Cancel">
        <div class="tit4">
            <p><span></span>订单时间：2020-03-16&nbsp&nbsp16:47:09</p>
            <p class="cal">已取消</p>
        </div>
        <div class="list">
            <ul>
                <li>
                    <div class="left"><img></div>
                    <div class="right">
                        <p class="explain">【新品首发】艾草青团（蛋黄肉松味）240g</p>
                        <div>
                           <p>￥19.9</p>
                           <p>x1</p>
                       </div>
                    </div>
                    <div class="bot">
                        <p>共计<span>1</span>件商品</p>
                        <p>应付总额：<span>￥29.9</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Cancel"
    }
</script>

<style scoped lang="less">
    @baseFontSize:20px;
    @baseSize:20;
    html{
        font-size: @baseFontSize;
    }
    .px2rem(@name,@px){
            @{name}:@px / 2 / @baseSize * 1rem;
    }

    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    #Cancel{
        .tit4{
            .px2rem(margin-top,30);
            display: flex;
            .px2rem(font-size,30);
            .px2rem(padding-left,30);
            .px2rem(padding-right,30);
            p:first-child{
                .px2rem(width,600);
                .px2rem(height,90);
            }
            .cal{
                text-align: right;
                color: red;
            }
        }
        .list{
            ul{
                li{
                    display: flex;
                    .px2rem(height,220);
                    flex-wrap: wrap;
                    background: gainsboro;
                    .left{
                        .px2rem(margin-top,25);
                        .px2rem(margin-left,25);
                        .px2rem(width,170);
                        .px2rem(height,170);
                        border: 1px solid gray;
                        box-sizing: border-box;
                    }
                    .right{
                        display: flex;
                        .px2rem(font-size,30);
                        .px2rem(width,520);
                        .px2rem(margin-left,35);
                        .explain{
                            .px2rem(width,330);
                            .px2rem(margin-top,25);
                        }
                        div{
                            .px2rem(margin-top,25);
                            .px2rem(margin-left,80);
                            p{
                                text-align: right;
                                &:first-child{
                                    color: red;
                                }
                                &:last-child{
                                    .px2rem(margin-top,75);
                                }
                            }
                        }
                    }
                    .bot{
                        display: flex;
                        .px2rem(font-size,25);
                        border-bottom: 1px solid gray;
                        p{
                            span{
                                color: red;
                            }
                            &:first-child{
                                .px2rem(margin-left,370);
                                .px2rem(line-height,80);
                            }
                            &:last-child{
                                .px2rem(margin-left,20);
                                .px2rem(line-height,80);
                            }

                        }
                    }
                }
            }
        }
    }
</style>